<template>
  <div>
    <el-card>
      <h2>订单管理</h2>
      <div style="margin-bottom: 16px;">
        <el-input v-model="keyword" placeholder="搜索用户名/景点名/订单编号" style="width: 240px; margin-right: 8px;" @keyup.enter="load" clearable />
        <el-button type="primary" @click="load">搜索</el-button>
        <el-radio-group v-if="user.role === 'ADMIN'" v-model="tab" style="margin-left: 16px;">
          <el-radio-button label="all">全部订单</el-radio-button>
          <el-radio-button label="mine">我的订单</el-radio-button>
        </el-radio-group>
        <span v-else style="margin-left: 16px; font-weight: bold;">我的订单</span>
      </div>
      <el-table :data="orders" style="width: 100%">
        <el-table-column prop="id" label="订单编号" width="100" />
        <el-table-column prop="username" label="用户名" />
        <el-table-column prop="scenicSpotName" label="景点名字" />
        <el-table-column prop="quantity" label="数量" width="80" />
        <el-table-column prop="totalPrice" label="总价" width="100" />
        <el-table-column prop="orderTime" label="下单时间" width="180">
          <template #default="scope">
            {{ formatDateTime(scope.row.orderTime) }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="100">
          <template #default="scope">
            <el-button type="danger" size="small" @click="delOrder(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        v-model:current-page="page"
        :page-size="size"
        :page-sizes="[5, 10, 20]"
        :total="total"
        layout="prev, pager, next, jumper, sizes"
        @current-change="load"
        @size-change="handleSizeChange"
        style="margin-top: 16px; text-align: right;"
      />
    </el-card>
  </div>
</template>
<script setup>
import { ref, onMounted, watch } from 'vue'
import axios from 'axios'
import { ElMessage, ElMessageBox } from 'element-plus'
const orders = ref([])
const page = ref(1)
const size = ref(5)
const total = ref(0)
const user = JSON.parse(sessionStorage.getItem('user') || '{}')
const tab = ref('all')
const keyword = ref('')
const load = async () => {
  let params = { page: page.value, size: size.value, keyword: keyword.value }
  if (tab.value === 'mine' || user.role !== 'ADMIN') params.userId = user.id
  const res = await axios.get('/api/orders/page', { params })
  orders.value = res.data.data.records
  total.value = res.data.data.total
}
onMounted(() => {
  if (user.role !== 'ADMIN') tab.value = 'mine'
  load()
})
watch(tab, () => { page.value = 1; load() })
function delOrder(id) {
  ElMessageBox.confirm('确定要删除该订单吗？', '提示', { type: 'warning' })
    .then(() => axios.delete('/api/orders/' + id).then(() => { ElMessage.success('删除成功'); load() }))
}
function formatDateTime(val) {
  if (!val) return ''
  const d = new Date(val)
  const pad = n => n.toString().padStart(2, '0')
  return `${d.getFullYear()}-${pad(d.getMonth()+1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`
}
function handleSizeChange(val) {
  size.value = val
  page.value = 1
  load()
}
</script> 